<template>
    <div class="left_box_1">

        <div class="top_box">
            各项目人员信息
        </div>

        <div class="right_box">
            <div class="box_item" v-for="(obj,index) in list" :key="index">

                <div class="item_top">
                    <div class="item_top_pro">
                        {{obj.program}}
                    </div>

                    <div>
                        <img :src=yj alt="">
                    </div>
                </div>
                <div class="item_top_program">{{obj.company}}</div>

                <div class="item_mid font">
                    <div>实时人数</div>
                    <div class="mid_sty">{{obj.realnum}}</div>
                </div>

                <div class="item_mid font">
                    <div>日累计人数</div>
                    <div class="mid_sty">{{obj.accnum}}</div>
                </div>

                <div class="item_mid font">
                    <div>总人数</div>
                    <div class="bot_sty"> {{obj.totalnum}}</div>
                </div>

            </div>
        </div>

    </div>
</template>

<script>
export default {
    name: "index",

    data() {
        return {
            yj: require('@/assets/img/yujing.jpg'),

            list: [
                {
                    program: '定远山湖花园二期',
                    company: '金鹏控股集团有限公司',
                    realnum: '0',
                    accnum: '35',
                    totalnum: '277'
                },
                {
                    program: '滁州中学新校区',
                    company: '金鹏控股集团有限公司',
                    realnum: '35',
                    accnum: '38',
                    totalnum: '614'
                },
                {
                    program: '滁州新悦城',
                    company: '金鹏控股集团有限公司',
                    realnum: '33',
                    accnum: '36',
                    totalnum: '111'
                },
                {
                    program: '皖东人民医院',
                    company: '金鹏控股集团有限公司',
                    realnum: '83',
                    accnum: '93',
                    totalnum: '214'
                },
                {
                    program: '亳州翁庄还原小区',
                    company: '金鹏控股集团有限公司',
                    realnum: '89',
                    accnum: '179',
                    totalnum: '3319'
                },
                {
                    program: '宿州王徐棚改安置区',
                    company: '金鹏控股集团有限公司',
                    realnum: '431',
                    accnum: '439',
                    totalnum: '984'
                },
                {
                    program: '琅琊新区99广场',
                    company: '金鹏控股集团有限公司',
                    realnum: '610',
                    accnum: '622',
                    totalnum: '1552'
                },
                {
                    program: '来安城建凤祥苑',
                    company: '金鹏控股集团有限公司',
                    realnum: '560',
                    accnum: '579',
                    totalnum: '1110'
                },
                {
                    program: '琅琊玖玖广场2号地块山河筑项目',
                    company: '金鹏控股集团有限公司',
                    realnum: '694',
                    accnum: '708',
                    totalnum: '1247'
                }
            ]
        };
    },

    methods: {
        async initData() {
            // let res = await new this.Request(this.Urls.m().workerAgeSummary, '').modepost();
            // console.log(JSON.stringify(res))
        }
    },

    mounted() {
        this.initData()
    }
};
</script>

<style scoped="scoped">
.left_box_1 {
    border: 1px solid #258add;
    background-color: rgb(13, 25, 45);
    display: flex;
    height: 100%;
    width: 100%;
    position: relative;
}

.top_box {
    position: absolute;
    left: 30px;
    top: -10px;
    color: #03fafb;
    font-size: 15px;
    text-shadow: 0 0 0.5rem #00d8ff;
}

.right_box {
    width: 100%;
    background-color: rgb(13, 25, 45);
    box-sizing: border-box;
    margin: 10px;
    overflow-y: auto;

    display: flex;
    flex-wrap: wrap;
}
.box_item {
    background-color: rgb(15, 27, 49);
    width: 420px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
    margin-left: 15px;
    margin-bottom: 10px;
    height: 110px;
}
.item_top {
    box-sizing: border-box;
    width: 100%;
    border-left: 2px solid #3594ff;
    height: 17px;
    margin-top: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 17px;
    color: #9ca2aa;
}

.item_top_left {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.item_top_pro {
    margin-left: 10px;
}

.item_top_program {
    margin-top: 5px;
    margin-left: 10px;
    font-size: 13px;
    color: #9ca2aa;
}
.item_mid {
    box-sizing: border-box;
    width: 100%;
    padding: 2px 10px 2px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(32, 40, 53, 0.8);
}
.font {
    font-size: 13px;
    color: #85878b;
}
.mid_sty {
    color: #f36649;
    font-weight: bold;
}
.bot_sty {
    color: #328cf0;
    font-weight: bold;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #c1c1c1;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #fafafa;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
}
</style>
